<template>
  <div class="loginBox">
    <ul class="title">
      <li @click="changeTemp('login')" :class="{current:currentTemp=='login'}">
        <router-link to="/pop/login">登录账号</router-link>
      </li>
      <li @click="changeTemp('register')" :class="{current:currentTemp=='register'}">
        <router-link to="/pop/register">注册账号</router-link>
      </li>
    </ul>
    <router-view
      :data="Details[currentTemp]"
      @passingStatus="passingStatus"
    ></router-view>
    <router-link to="/index">
      <img
        src="../assets/img/close.png"
        alt=""
        id="closeIcon"
        @click="closePop"
      />
    </router-link>
  </div>
</template>

<script>
import "../assets/style/default.css";
import loginTemp from "./loginTemp";
export default {
  name: "loginBox",

  data() {
    return {
      currentTemp: "login",
      Details: {
        login: {
          func: "login",
          tips: {
            success: "登录成功！",
            fail: "登录失败，请重试~~"
          },
          btnName: "登录",
          inputs: [
            { icon: "username", placeHolder: "请输入用户名", value: "" },
            { icon: "password", placeHolder: "请输入密码", value: "" }
          ]
        },
        register: {
          func: "register",
          tips: {
            success: "注册成功！快去登录吧！",
            fail: "注册失败，请重试~~"
          },
          btnName: "注册",
          inputs: [
            { icon: "username", placeHolder: "请输入用户名" },
            { icon: "password", placeHolder: "请输入密码" },
            { icon: "name", placeHolder: "请输入姓名" },
            { icon: "phone", placeHolder: "请输入电话号码" }
          ]
        }
      }
    };
  },
  components: {
    loginTemp
  },
  mounted() {},
  methods: {
    passingStatus(val) {
      this.$emit("passingStatus", val);
      // console.log(val)
    },
    //调用父组件方法 关闭弹窗
    closePop() {
      this.$emit("close");
    },
    //改变当前模板
    changeTemp(temp) {
      this.currentTemp = temp;
    }
  }
};
</script>

<style  scoped>
.loginBox {
  width: 30rem;
  /* height: 22rem; */
  padding: 0.6rem 0 0;
  background: white;
  border-radius: 0.8rem;
  /* box-shadow: inset -5px  -8px 12px #d5d5d5; */
  position: relative;
  margin: 8rem auto 0;
}
ul.title {
  width: 100%;
  height: 3rem;
  /* margin: 0 auto; */
  display: flex;
  justify-content: center;
  font-size: 1.2rem;
  /* border-bottom: 1px solid  #bfbfbf; */
  /* font-weight: bold; */
  /* background: pink; */
}
ul.title li {
  width: 5rem;
  margin: 0 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.6rem;
  cursor: pointer;

  /* background: yellow; */
}
ul.title li a {
  color: #999999;
}
.current {
  border-bottom: 1px solid black;
}
.current a {
  color: #595959;
}
#closeIcon {
  width: 1rem;
  height: 1rem;
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  cursor: pointer;
}
</style>